<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,
    initial-scale=1.0,user-scalable=no"
    />
    <title>首页</title>

    <!-- 重置样式 -->
    <link rel="stylesheet" href="../../../assets/css/normalize.css" />
    <link rel="stylesheet" href="../../../assets/css/reset.css" />

    <!-- 公共样式 -->
    <link rel="stylesheet" href="../../../assets/css/property.css" />
    <link rel="stylesheet" href="../../../assets/css/basic.css" />

    <!-- animate.css动画库 -->
    <link rel="stylesheet" href="../../../libs/animate/animate.css" />

    <!-- icon图标 -->
    <link rel="stylesheet" href="../../../icons/iconfont.css" />

    <!-- 底部公共样式 -->
    <link rel="stylesheet" href="../../../assets/css/basic.css" />

    <!-- 当前样式 -->
    <link rel="stylesheet" href="./run.css" />

    <!-- 高德地图 -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=a89085bd09c1839e1c1c5e399237b101"></script>
  </head>

  <body class="dpflex fdcolumn">
    <header class="dpflex">
      <a href="#" class="after">跑步</a>
      <a href="#">骑行</a>
      <a href="#">课程训练</a>
    </header>

    <div class="main dpflex">
      <!-- 运动距离 -->
      <div class="distance dpflex">
        <p class="text">目前累积跑步距离</p>
        <div class="rangeNum">
          <span class="num">999.99</span>
          <span class="kilometre">公里</span>
        </div>
      </div>
      <!-- 高德地图 -->
      <div id="container"></div>

      <!-- 运动类型 -->
      <div class="category dpflex">
        <a href="#" class="outdoors active">户外跑</a>
        <a href="#" class="fat">燃脂跑</a>
        <a href="#" class="treadmill">跑步机</a>
      </div>

      <!-- GO点击按钮 -->
      <div class="start">GO</div>

      <!-- 目标设置 -->
      <div class="setUp dpflex">
        <div class="fit iconfont icon-shezhi"></div>
        <div class="target">设置目标 &gt;</div>
        <div class="music iconfont icon-yinle"></div>
      </div>

      <!-- 跑步路线 -->
      <div class="route">
        <p>跑步路线</p>
        <span class="text">使用跑步路线,邂逅附近的同行者</span>
        <span class="symbol">&gt;</span>
      </div>
    </div>

    <footer>
      <ul class="dpflex">
        <li class="dpflex">
          <a href="#" class="dpflex"
            ><span class="iconfont icon-shouye"></span>首页</a
          >
        </li>
        <li class="dpflex">
          <a href="#" class="dpflex after"
            ><span class="iconfont icon-tubiaozhizuomoban"></span>运动</a
          >
        </li>
        <li class="dpflex">
          <a href="#" class="dpflex"
            ><span class="iconfont icon-quanzi"></span>圈子</a
          >
        </li>
        <li class="dpflex">
          <a href="#" class="dpflex"
            ><span class="iconfont icon-wode"></span>我的</a
          >
        </li>
      </ul>
    </footer>

    <script src="./run.js"></script>

    <script type="text/javascript">
      // 地图初始化应该在地图容器div已经添加到DOM树之后
      var map = new AMap.Map('container', {
        zoom: 12,
      });
    </script>
  </body>
</html>
